<template>
  <div class="mobile-cascader">
    <el-cascader
      ref="cascader"
      v-model="selectedValue"
      :options="options"
      :props="props"
      @change="handleChange"
      @visible-change="handleVisibleChange"
      @touchstart.native="handleTouchStart"
    >
    </el-cascader>
  </div>
</template>

<script>
export default {
  props: {
    options: Array,
    value: Array
  },
  data() {
    return {
      selectedValue: this.value,
      props: {
        expandTrigger: 'hover',
        checkStrictly: true // 可选是否严格模式
      }
    }
  },
  methods: {
    handleTouchStart() {
      this.$refs.cascader.toggleDropDownVisible(true);
    },
    handleVisibleChange(visible) {
      if (visible) {
        document.body.style.overflow = 'hidden';
        this.$emit('opened');
      } else {
        document.body.style.overflow = '';
        this.$emit('closed');
      }
    },
    handleChange(value) {
      this.$emit('input', value);
      this.$emit('change', value);
    }
  },
  watch: {
    value(newVal) {
      this.selectedValue = newVal;
    }
  }
}
</script>

<style scoped>
.mobile-cascader /deep/ .el-cascader__dropdown {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90% !important;
  max-width: 400px !important;
  max-height: 70vh !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.mobile-cascader /deep/ .el-cascader-menu {
  height: 60vh !important;
}

.mobile-cascader /deep/ .el-cascader-node {
  padding: 14px 20px !important;
  font-size: 16px !important;
}
</style>
